<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body style>
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup(event)" />
            <input type="button" name="bt" value="确认1" onclick="handleClick(1)" />
            <input type="button" name="bt" id="button2" value="确认2" onclick="handleClick(0)" />
            <input type="button" name="changecolor" value="变色" onclick="changeColor()" />
        </div>
        <div id="todogroup">
            <!-- <div id="todo0"><input type="checkbox" name="todocheck">吃饭<button type="button" onclick="deletByIndex(0)">删除</button></div>
            <div>睡觉</div> -->
        </div>
        <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')"></div>
    </div>
</body>
<script lang="javascript">
    function init() {

        document.getElementById("button2").onclick = handleClick;

    }
    //
    var aa = null;
    function my(ss) {
        if (ss == 1) {
            window.clearInterval(aa);
        } else {
            aa = window.setInterval(function () { changeColor() }, 1000);
        }
    }


    //
    var intCnt = 0;
    function handleClick(e) {

        //console.log('handleClick');
        //console.log(e);
        // var temp=document.getElementsByClassName("bt");
        // console.log(temp);
        // if (e > 0) {
        //     my(1);
        // }
        // else {
        //     my();

        // }
        var temp = getValue();
        var div = document.createElement('div');

        document.getElementById("todogroup").innerHTML += "<div class='item' id='todo"
            + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
            + temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
            + intCnt + ")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
        //console.log(intCnt);
        // var div = document.createElement('div');
        // div.innerHTML = temp;
        // document.getElementById("todogroup").append(div);

    }
    function getValue() {
        var temp = document.getElementById("inputtext");
        //console.log(temp.value);
        return temp.value;
    }
    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();
    }

    function enter(id) {
        document.getElementById(id).style = 'background-color:#040506'
    }
    function leave(id) {
        document.getElementById(id).style = 'background-color:#FFFFFF'

    }
    function keyup(e) {
        if (e.keyCode == 13) {
            handleClick();
        }
    }
    function changeColor() {
        var color = "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
        document.getElementsByClassName("main")[0].style.backgroundColor = color;
    }
    init();
</script>

<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .main {
        padding: 8px;
        border: 1px solid #333333;
        border-radius: 8px;
    }

    .row {
        display: flex;
    }

    .item {
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;

        background-color: #ffffff;
    }

    .item:hover {
        background-color: #8f8d8d;
        transform: scale(1.1);
    }

    .item-value {
        flex-grow: 1;
        color: #000000;
    }

    .item-del {
        color: aliceblue;
        background-color: rgb(96, 86, 86);
        border: 0px;
        opacity: 0;
    }

    .item:hover .item-del {
        opacity: 1;
    }

    .input {
        padding: 8px;
        outline: none;
    }

    .input:focus {
        box-shadow: 0px 0px 10px #274291;
        border: 2px solid #bbb8b8;
        transform: scale(1.1);
    }
</style>

</html>